<!--
 * @Author: wxj
 * @Description: 
-->
<template>
  <div class="demo">
    <el-button @click="getParentData">
      获取父组件数据
    </el-button>
    modelValue--- {{ modelValue }}
    <el-input type="text" v-model="val" @input="Input" />
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "demo",
  props: {
    modelValue: {
      // 第一步
      type: String,
      default: "",
    },
  },

  setup(props, ctx) {
    const state = reactive({
      val: props.modelValue,
    });

    function getParentData() {
      console.log($parent);
    }

    function Input() {
      ctx.emit("update:modelValue", state.val);
    }
    return {
      ...toRefs(state),
      getParentData,
      Input,
    };
  },
};
</script>

<style lang="scss" scoped></style>
